```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git操作详解：复原(revert)与重设(reset)</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=NotoSans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 6px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .feature-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Git操作详解</h1>
                    <h2 class="text-2xl md:text-3xl font-semibold mb-6">复原(revert)与重设(reset)</h2>
                    <p class="text-lg opacity-90 mb-8">掌握Git核心操作，优雅管理版本控制</p>
                    <div class="flex space-x-4">
                        <a href="#revert" class="bg-white text-purple-700 hover:bg-purple-100 px-6 py-2 rounded-lg font-medium transition duration-300">了解revert</a>
                        <a href="#reset" class="border border-white text-white hover:bg-white hover:text-purple-700 px-6 py-2 rounded-lg font-medium transition duration-300">了解reset</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-sm">
                        <div class="mermaid">
                            graph LR
                            A[Git操作] --> B[复原 revert]
                            A --> C[重设 reset]
                            B --> D[创建新提交撤销变更]
                            B --> E[保留历史记录]
                            C --> F[重置到指定提交]
                            C --> G[可选模式: soft/mixed/hard]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl py-12 px-4 md:px-0">
        <!-- Revert Section -->
        <section id="revert" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="feature-icon bg-purple-100 text-purple-600">
                    <i class="fas fa-undo-alt text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold ml-4">复原 (git revert)</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-history text-purple-500 mr-2"></i> 用途
                    </h3>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>撤销已提交的变更</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>保留完整变更历史</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>适用于公共/共享分支</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-terminal text-blue-500 mr-2"></i> 命令
                    </h3>
                    <div class="code-block p-4 mb-4">
                        <span class="text-green-400">$</span> git revert &lt;commit-hash&gt;
                    </div>
                    <p class="text-sm text-gray-600">创建一个新提交，反转指定提交的更改</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i> 影响
                    </h3>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>不改变提交历史</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>仅影响当前分支</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>安全用于团队协作</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 最佳实践
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-lg mb-2 text-purple-600">适用场景</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>撤销已推送到远程的错误提交</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>需要保留完整历史记录的项目</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>团队协作中的主分支操作</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2 text-purple-600">注意事项</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-exclamation text-red-500 mt-1 mr-2"></i>
                                <span>可能产生冲突需要解决</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation text-red-500 mt-1 mr-2"></i>
                                <span>撤销多个提交时注意顺序</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation text-red-500 mt-1 mr-2"></i>
                                <span>合并提交需要特殊处理</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Reset Section -->
        <section id="reset">
            <div class="flex items-center mb-8">
                <div class="feature-icon bg-blue-100 text-blue-600">
                    <i class="fas fa-redo-alt text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold ml-4">重设 (git reset)</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-history text-blue-500 mr-2"></i> 用途
                    </h3>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>重置分支到指定提交</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>修改本地提交历史</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>清理工作区和暂存区</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-terminal text-purple-500 mr-2"></i> 命令模式
                    </h3>
                    <div class="space-y-3">
                        <div class="code-block p-3 text-sm">
                            <span class="text-green-400">$</span> git reset --soft &lt;commit&gt;
                        </div>
                        <div class="code-block p-3 text-sm">
                            <span class="text-green-400">$</span> git reset --mixed &lt;commit&gt;
                        </div>
                        <div class="code-block p-3 text-sm">
                            <span class="text-green-400">$</span> git reset --hard &lt;commit&gt;
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-3 flex items-center">
                        <i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i> 影响
                    </h3>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>可能改变提交历史</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>影响工作目录/暂存区</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                            <span>谨慎用于公共分支</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 模式详解
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="border-l-4 border-blue-400 pl-4">
                        <h4 class="font-medium text-lg mb-2 text-blue-600">--soft</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>仅重置HEAD指针</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>保留暂存区和工作区</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>适合修改提交信息</span>
                            </li>
                        </ul>
                    </div>
                    <div class="border-l-4 border-purple-400 pl-4">
                        <h4 class="font-medium text-lg mb-2 text-purple-600">--mixed</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>默认模式</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>重置HEAD和暂存区</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>保留工作区修改</span>
                            </li>
                        </ul>
                    </div>
                    <div class="border-l-4 border-red-400 pl-4">
                        <h4 class="font-medium text-lg mb-2 text-red-600">--hard</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>彻底重置所有内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>丢弃所有修改</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-angle-right text-gray-400 mt-1 mr-2"></i>
                                <span>谨慎使用！</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Comparison Section -->
        <section class="mt-20">
            <h2 class="text-3xl font-bold mb-8 text-center">Revert vs Reset 对比</h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 divide-x divide-gray-200">
                    <div class="p-6">
                        <h3 class="text-2xl font-semibold text-purple-600 mb-4 text-center">
                            <i class="fas fa-undo-alt mr-2"></i> Revert
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-plus-circle text-green-500 mt-1 mr-2"></i>
                                <div>
                                    <span class="font-medium">优点:</span>
                                    <ul class="list-disc list-inside ml-4 text-gray-700">
                                        <li>安全，不修改历史</li>
                                        <li>适合公共分支</li>
                                        <li>可追溯的撤销操作</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-minus-circle text-red-500 mt-1 mr-2"></i>
                                <div>
                                    <span class="font-medium">缺点:</span>
                                    <ul class="list-disc list-inside ml-4 text-gray-700">
                                        <li>生成额外的提交</li>
                                        <li>撤销多个提交时较复杂</li>
                                        <li>可能产生冲突</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-semibold text-blue-600 mb-4 text-center">
                            <i class="fas fa-redo-alt mr-2"></i> Reset
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-plus-circle text-green-500 mt-1 mr-2"></i>
                                <div>
                                    <span class="font-medium">优点:</span>
                                    <ul class="list-disc list-inside ml-4 text-gray-700">
                                        <li>彻底清理不需要的提交</li>
                                        <li>灵活控制重置程度</li>
                                        <li>保持提交历史整洁</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-minus-circle text-red-500 mt-1 mr-2"></i>
                                <div>
                                    <span class="font-medium">缺点:</span>
                                    <ul class="list-disc list-inside ml-4 text-gray-700">
                                        <li>修改历史，团队协作需谨慎</li>
                                        <li>可能丢失工作内容(硬重置)</li>
                                        <li>可能导致远程分支不一致</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 bg-blue-50 border border-blue-100 rounded-lg p-6">
                <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                    <i class="fas fa-question-circle mr-2"></i> 如何选择？
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-lg mb-2 text-blue-600">选择Revert当:</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>撤销已推送到远程的提交</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>需要保留完整历史记录</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>在共享分支上操作</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2 text-blue-600">选择Reset当:</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>操作本地未推送的提交</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>需要彻底丢弃某些更改</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>整理本地提交历史</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold text-white">技术小馆</h3>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="hover:text-white transition duration-300">
                        <i class="fas fa-link mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="mt-6 pt-6 border-t border-gray-800 text-center text-sm text-gray-500">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```